<template>
  <div class="my-scoped-wrapper">
    <div class="title">{{ title }}</div>
    <div class="header" @click="clickHeader">
      <slot name="header" :msg="msg" :obj="obj"></slot>
    </div>
    <div class="container">
      <slot :params="defaultParams"></slot>
    </div>
    <div class="footer">
      <slot name="footer" :params="footerParams"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, defineExpose, inject } from 'vue';


const parentAge1 = inject('name', ref(-1));
console.log('parentAge1', parentAge1.value);


const msg = ref(1232);
const obj = ref({ name: "obj", desc: "为了测试作用域插槽功能", });
const defaultParams = ref(1234);
const footerParams = ref("我是footer插槽的参数");
defineProps({
  title: {
    type: String || Number,
    default: ""
  }
})

const $emits = defineEmits(["change", "delete"]);
// 在TS环境中为IDE设置宏 希望IDE自动感知 prop类型 并提示? 
// const slots = defineSlots<{
//   default(props: { name: string }): string,
//   header(props: { msg: string, obj: { name: string, desc: string } }): string,
//   footer(props: string): string
// }>();
// console.log(slots);

function clickHeader(e: Event): void {
  if (e.target instanceof HTMLElement) {
    let tar: HTMLElement = e.target || e.srcElement;
    $emits('change', e, tar);
  }
}

const addSum = (a: number, b: number): number => a + b;
defineExpose({
  addSum
})

</script>

<style scoped>
.scoped-wrapper {
  width: 100%;
  height: 50vh;
  border: 2px solid #cccccc;
}

.header {
  width: 100%;
  height: 100px;
  /* background-color: black;
  color: white; */
}

.container {
  width: 100%;
  height: auto;
  flex: 1;
  /* background-color: white;
  color: black; */
  border: 1px solid #cccccc;
}

.footer {
  width: 100%;
  height: 100px;
  /* background-color: black;
  color: white; */
}
</style>